<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" >
<title>二级联动下拉框</title>
<style>
	select{ padding: 5px 10px; font-size: 24px; }
</style>
<!--
data:
	"北京市": ["海淀区","朝阳区","丰台区"]
	"河北省": ["石家庄","唐山","秦皇岛"]
	"辽宁省": ["沈阳","大连","鞍山"]
	"山东省": ["青岛","济南","烟台"]
-->
<!--引入jquery的js库
<script src="js/jquery-1.8.3.js"></script> -->
<script>
	/* 练习1: 当select中的内容发生变化时，获取变化后的内容 */
	function getCountry(){
		//获取select元素
		var oSelect = document.getElementById("country");
		//获取select元素的value值（也就是被选中option的内容或value值）
		alert(oSelect.value);
	}
	
	
	var data = {
		"北京市": ["海淀区","朝阳区","丰台区"],
		"河北省": ["石家庄","唐山","秦皇岛"],
		"辽宁省": ["沈阳","大连","鞍山"],
		"山东省": ["青岛","济南","烟台"]
	}
	/* 练习2: 实现二级联动下拉框 */
	function selectCity(thisobj){
		//1.获取用户选中的省份
		var prov = thisobj.value;
		//2.根据省份获取该省份下所有的城市列表 北京市
		var arrCity = data[prov];
		//console.log(arrCity);
		
		//3.将该省份下所有的城市 作为option选项填充到第二个select列表中
		//>>获取第二个select
		var oCity = document.getElementById("city");
		
		//>>先清空上个省份对应的城市列表
		//方式一
		//oCity.innerHTML = "<option>--选择城市--</option>";
		
		//方式二 JS中的数组的特点
		var opts = oCity.getElementsByTagName("option");
		//循环遍历, 挨个删除每一个option
		var len = opts.length;
		for(var i=0; i<len-1; i++){
			oCity.removeChild(opts[1]);
		}
		
		//海淀区 --> <option>海淀区</option>
		for(var i = 0; i<arrCity.length; i++){
			var oOpt = document.createElement("option");
			oOpt.innerHTML = arrCity[i];
			oCity.appendChild(oOpt);
		}
	}
	
	
	/* -- 通过jQuery实现二级联动下拉框
	function selectCity(thisobj){
		var prov = $(thisobj).val();//获取用户选中的省份
		var citys = data[prov];//再根据省份获取对应的市区
		$("#city").html("<option>--选择城市--</option>");//清空之前的数据
		for(var i=0; i<citys.length; i++){
			$("#city").append("<option>"+[citys[i]]+"</option>");
		}
	} -- */
	
</script>
</head>
<body>
	<!-- 练习01: 当select中的内容发生变化时，获取变化后的内容 -->
	<select id="country" onchange="getCountry()"  >
		<option value="none">--选择国家--</option>
		<option value="中国">中国</option>
		<option value="美国">美国</option>
		<option value="日本">日本</option>
	</select>
	<br><br>
	<hr/><br>
	
	<!-- 练习02: 实现二级联动下拉框 -->
	<div>
		<select id="province" onchange="selectCity(this)">
			<option>--选择省市--</option>
			<option>北京市</option>
			<option>河北省</option>
			<option>辽宁省</option>
			<option>山东省</option>
		</select>
		
		<select id="city">
			<option>--选择城市--</option>
		</select>
	</div>
</body>

</html>
